import { NavLink,Navigate,useRoutes } from "react-router-dom";
import About from "./pages/about";
import Home from "./pages/Home";
import Father from "./pages/funcitonItem/Father";
import Msg from "./pages/Msg.jsx";
function App() {
  const element =  useRoutes([
    {path:'/about',element:<About/>},
    {path:'/home',element:<Home/>,children:[
      // {path:'msg/:name',element:<Msg/>} // params方式，需要占位
      {path:'msg',element:<Msg/>} // state方式
    ]},
    {path:'/father',element:<Father/>},
    {path:'/',element:<Navigate to='/father'/>}
  ])
  return (
    <div>
      <NavLink className='router' to='/about' >about</NavLink>
      <NavLink to='/home' >home</NavLink>
      <NavLink to='/father' >father</NavLink>
      {element}
      {/* <Routes>
        <Route path="/about" element={<About/>} ></Route>
        <Route path="/home" element={<Home/>} ></Route>
        <Route path="/father" element={<Father/>} ></Route>
        <Route path="/" element={<Navigate to='/father' />} ></Route>
      </Routes> */}
    </div>

  )

}

export default App;
